<template>
  <div id="footer">
    <div v-if="isLogin">
      <span @click="deleteBlog">
        <i class="iconfont iconshanchu"></i>
        <span>删除</span>
      </span>
      <span @click="editBlog">
        <i class="iconfont iconbianji"></i>
        <span>编辑</span>
      </span>
    </div>
    <div class="Way">
      <!-- <label-way :way="way" ></label-way> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, defineProps } from "vue";
import { useUserStore } from "@/store";
import Bus from "@/bus";
import axios from "@/http";
import { state } from "@/observable";
// import LabelWay from "../../components/label"
const store = useUserStore();
const props = defineProps({
  way: {
    type: String,
    default: "",
  },
  id: {
    type: Number,
    default: 0,
  },
});
const isLogin = computed(
  () => state.isLogin && store.user.status === "876ea4f21078c7d38e3b0bdc74a"
);
const EditBlog = computed(() => state.EditBlog);
const showTip = computed(() => state.showTip);
const showBlogOption = computed(
  () =>
    store.user.status === "876ea4f21078c7d38e3b0bdc74a" && localStorage.LoginToken
);

const deleteBlog = () => (state.showTip = true);
const cancelDel = () => (state.showTip = false);
const editBlog = () => {
  state.EditBlog = true;
  axios
    .get("/blog/list", {
      params: {
        id: props.id,
        status: store.user.status,
      },
    })
    .then((res) => {
      const { data } = res;
      if (data.error === -1) {
        Bus.$emit("editContent", {
          editContent: data.data[0].editContent,
          id: props.id,
          title: data.data[0].title,
        });
      }
    });
};
</script>

<style lang="scss" scoped>
// @media screen and (max-width: 765px) {
//   #footer {
//     position: relative;
//     z-index: 5;
//     height: 20px;
//     bottom: 17px;
//     span {
//       margin-left: 15px;
//     }
//     .Way {
//       // display: inline-block;
//       width: 80px;
//       height: 15px;
//       padding: 0 20px;
//       overflow: hidden;
//       position: absolute;
//       right: 15px;
//       bottom: 5px;
//     }
//   }
// }

@media screen and (min-width: 765px) {
  #footer {
    position: relative;
    height: 11%;

    span {
      margin-left: 15px;
    }
    .Way {
      // display: inline-block;
      width: 80px;
      height: 15px;
      padding: 0 20px;
      overflow: hidden;
      position: absolute;
      right: 15px;
      bottom: 3px;
    }
  }
}
</style>
